import React from 'react'
import CustomTable from '@/components/table'
import CustomModal from '@/components/customModal'
import { getUrlAllParams } from '@/utils/base.js'
import { tableDb } from './data'
import styles from './style.module.less'
class PlaceHolder extends React.Component {
  state = {
    tableList: tableDb,
    isSmallScreen: true
  }

  componentDidMount() {
    const a = getUrlAllParams(
      '?taskType=1006&menuId=4069_pendingTasksList&fileCacheVersion=1641524252845'
    )
    console.log(a)
  }

  componentDidUpdate(prevProps) {
    const { value, visible } = this.props.filters
    console.log(value, 'value')
    console.log(visible, 'visible')
  }

  setScreenStatus = () => {
    const { isSmallScreen } = this.state
    this.setState({ isSmallScreen: !isSmallScreen })
  }

  onCancel = () => {
    this.props.setFilters({
      visible: false
    })
  }
  render() {
    const { tableList, isSmallScreen } = this.state
    const { visible } = this.props.filters
    console.log('visible:', visible)
    const columns = [
      {
        title: '总分',
        drag: true,
        dataIndex: 'totalScore',
        width: 43
      },
      {
        title: '代码',
        drag: true,
        dataIndex: 'fundCode',
        width: 100,
        align: 'center'
      },
      {
        title: '基金名称',
        drag: true,
        dataIndex: 'fundAbbrName'
      },
      {
        title: '基金经理',
        dataIndex: 'fundManager'
      },
      {
        title: '日回报%',
        dataIndex: 'dailyYieldString',
        align: 'right'
      },
      {
        title: '月回报%',
        dataIndex: 'monthYieldString',
        align: 'right'
      },
      {
        title: 'YTD%',
        dataIndex: 'ytdString',
        align: 'right'
      }
    ]
    return (
      <div className={styles.container}>
        <CustomTable
          pagination={false}
          rowKey={(record) => record.fundCode}
          columns={columns}
          dataSource={tableList}
        />
        <CustomModal
          enLarge
          title="自定义"
          wrapClassName={isSmallScreen ? 'small' : 'larage'}
          screenStatus={isSmallScreen}
          visible={visible}
          setScreenStatus={this.setScreenStatus}
          onOk={this.onOk}
          onCancel={this.onCancel}
        />
      </div>
    )
  }
}

export default PlaceHolder
